import { DelIcon } from '@/components/bs-icons/del'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/bs-ui/select'
import { useMemo } from 'react'
import ComponentParameter from './ComponentParameter'

export default function Component({ compId, options, disables, version, className, onChangeVersion, onClose }) {
  // 保留当前compId和上游组件
  const nodes = useMemo(() => {
    if (!version?.data) return []
    const showNodes = {}
    const edges = version.data.edges

    const deep = _compId => {
      edges.forEach(edge => {
        if (edge.target === _compId) {
          showNodes[edge.source] = true
          showNodes[edge.target] = true
          deep(edge.source)
        }
      })
    }
    deep(compId)

    return version.data.nodes.filter(node => showNodes[node.id])
  }, [version, compId])

  // empty
  if (!version) {
    return (
      <div className="rounded-md bg-[#fff] p-2 shadow-sm">
        <div className="group relative flex items-center justify-center border-b pb-2">
          <Select onValueChange={onChangeVersion}>
            <SelectTrigger className="h-6 w-[120px]">
              <SelectValue placeholder="选择版本" />
            </SelectTrigger>
            <SelectContent>
              {options.map(vs => (
                <SelectItem key={vs.id} value={vs.id} textValue={'vs.name'} disabled={disables.includes(vs.id)}>
                  <div className="flex w-64 justify-between">
                    <span className="w-36 overflow-hidden text-ellipsis whitespace-nowrap">{vs.name}</span>
                    <span className="text-xs text-muted-foreground">
                      {vs.update_time.replace('T', ' ').substring(0, 16)}
                    </span>
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <DelIcon
            className="absolute -top-1 right-0 hidden cursor-pointer text-muted-foreground group-hover:block"
            onClick={onClose}
          />
        </div>
        <div className="min-h-[100px]"></div>
      </div>
    )
  }

  // 版本信息
  return (
    <div className={'rounded-md bg-[#fff] p-2 shadow-sm ' + className}>
      <div className="group flex items-center justify-between border-b pb-2">
        <Select value={version.id} onValueChange={onChangeVersion}>
          <SelectTrigger className="h-6 w-[120px]">
            <SelectValue placeholder="选择版本" />
          </SelectTrigger>
          <SelectContent>
            {options.map(vs => (
              <SelectItem key={vs.id} value={vs.id} textValue={'vs.name'} disabled={disables.includes(vs.id)}>
                <div className="flex w-64 justify-between">
                  <span className="w-36 overflow-hidden text-ellipsis whitespace-nowrap text-left">{vs.name}</span>
                  <span className="text-xs text-muted-foreground">
                    {vs.update_time.replace('T', ' ').substring(0, 16)}
                  </span>
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <span className="relative pr-8 text-sm text-muted-foreground">
          {version.update_time.replace('T', ' ')}
          <DelIcon
            className="absolute -top-1 right-0 hidden cursor-pointer text-muted-foreground group-hover:block"
            onClick={onClose}
          />
        </span>
      </div>

      <div className="max-h-52 overflow-y-auto pb-10">
        <div className="flex gap-1 px-2 py-1 text-sm text-muted-foreground">
          <span className="w-28 min-w-12">组件</span>
          <span className="w-28 min-w-12">参数名</span>
          <span className="flex-1">参数值</span>
        </div>
        {nodes.map(node => (
          <div className="mt-1 flex gap-1 rounded-sm bg-[#f4f5f8] px-2 py-1 text-sm odd:bg-gray-50">
            <span className="w-28 min-w-12 self-center break-all">{node.data.type}</span>
            <div className="pointer-events-none min-w-0 flex-1 opacity-60">
              {
                <ComponentParameter disabled flow={version} node={node} template={node.data.node.template}>
                  {(key, name, formItem) => (
                    <div key={key} className="mb-1 flex">
                      <span className="w-28 min-w-12 break-all">{name}</span>
                      <div className="min-w-0 flex-1">{formItem}</div>
                    </div>
                  )}
                </ComponentParameter>
              }
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
